<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>API Documentation</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="/assetsJs/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="/assetsJs/md5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <style>
        /* 基础样式 */
        body {
            margin: 0;
            padding: 0;
            background: radial-gradient(72.92% 41.34% at 101.25% 0%, rgba(255, 238, 219, 0.85) 0%, rgba(255, 255, 255, 0) 60%),
                        radial-gradient(67.79% 16.4% at 95.31% -2.78%, rgba(255, 227, 252, 0.7) 0%, rgba(255, 255, 255, 0) 100%),
                        rgb(255, 255, 255);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            font-family: "Roboto", "SF Pro SC", "SF Pro Display", "SF Pro Icons", "PingFang SC", BlinkMacSystemFont, -apple-system, "Segoe UI", "Microsoft Yahei", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
        }

        /* 导航栏样式 */
        .navbar {
            border: unset;
            background-color: #ffffff;
            box-shadow: 0 1px 3px rgba(0,0,0,.1);
        }

        .navbar-default {
            background-color: #ffffff;
        }

        /* 容器样式 */
        .container-fluid {
            display: flex;
            min-height: 100vh;
            padding: 0;
            margin: 0;
        }

        /* 左侧菜单 */
        #sidebar {
            width: 280px;
            background: #fff;
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            overflow-y: auto;
            padding: 15px 0;
            border-right: 1px solid #eee;
            transition: all 0.3s ease;
        }

        /* 折叠状态 */
        #sidebar.collapsed {
            width: 50px;
        }

        #sidebar.collapsed .search-box,
        #sidebar.collapsed .group-name,
        #sidebar.collapsed .api-count,
        #sidebar.collapsed .api-list,
        #sidebar.collapsed .api-title {
            display: none;
        }

        #sidebar.collapsed .group-header {
            padding: 8px 15px;
            justify-content: center;
        }

        #sidebar.collapsed + #main-content {
            margin-left: 50px;
        }

        /* 折叠按钮 */
        .sidebar-toggle {
            position: fixed;
            left: 280px;
            top: 20px;
            width: 20px;
            height: 60px;
            background: #fff;
            border: 1px solid #eee;
            border-left: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .sidebar-toggle.collapsed {
            left: 50px;
        }

        .sidebar-toggle i {
            color: #666;
            transition: transform 0.3s ease;
        }

        .sidebar-toggle.collapsed i {
            transform: rotate(180deg);
        }

        /* 搜索框容器样式优化 */
        .search-container {
            padding: 16px;
            position: relative;
            border-bottom: 1px solid #eee;
            background: #fff;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        /* 搜索框样式优化 */
        .search-box {
            position: relative;
            display: flex;
            align-items: center;
            background: #f5f7f9;
            border-radius: 6px;
            transition: all 0.3s ease;
        }

        .search-box:focus-within {
            background: #fff;
            box-shadow: 0 0 0 2px rgba(67, 113, 251, 0.2);
        }

        .search-box .fa-search {
            position: absolute;
            left: 12px;
            color: #999;
            font-size: 14px;
            pointer-events: none;
        }

        #apiSearch {
            width: 100%;
            padding: 10px 12px 10px 35px;
            border: none;
            background: transparent;
            font-size: 14px;
            outline: none;
            color: #333;
        }

        #apiSearch::placeholder {
            color: #999;
        }

        /* 左侧菜单项 */
        .api-group {
            margin-bottom: 5px;
        }

        .group-header {
            padding: 8px 15px;
            display: flex;
            align-items: center;
            cursor: pointer;
        }

        .group-header i {
            margin-right: 8px;
            color: #666;
        }

        .group-name {
            color: #333;
            font-size: 13px;
            flex: 1;
        }

        .api-count {
            color: #999;
            font-size: 12px;
        }

        .api-list {
            display: none;
            padding-left: 25px;
        }

        .api-item {
            padding: 8px 15px 8px 25px;
            display: flex;
            align-items: center;
            cursor: pointer;
            font-size: 13px;
            color: #666;
        }

        .api-item:hover {
            background: #f6f6f6;
        }

        .api-item.active {
            background: #f0f7ff;
            color: #1890ff;
        }

        /* 请求方法标签样式 */
        .method-tag {
            padding: 4px 12px;
            border-radius: 4px;
            font-weight: 500;
            font-size: 14px;
        }

        /* POST方法的特定样式 */
        .method-tag.post {
            background: #EF6820;
            color: white;
        }

        /* 其他方法的样式 */
        .method-tag.get {
            background: #666;
            color: white;
        }

        .method-tag.put {
            background-color: #FCA130;
            color: white;
        }

        .method-tag.delete {
            background-color: #F93E3E;
            color: white;
        }

        .method-tag.patch {
            background-color: #50E3C2;
            color: white;
        }

        /* 右侧内容区域 */
        #main-content {
            flex: 1;
            margin-left: 280px;
            padding: 20px 30px;
        }

        /* 右侧导航 */
        .right-nav {
            position: fixed;
            right: 20px;
            top: 100px;
            background: #fff;
            padding: 10px 15px;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        }

        .nav-item {
            padding: 8px 0;
            color: #666;
            font-size: 13px;
            cursor: pointer;
        }

        .nav-item:hover {
            color: #333;
        }

        .nav-item.active {
            color: #1890ff;
        }

        /* 右侧内容区域样式 */
        .api-content {
            padding: 20px;
        }

        /* 右侧内容区域的标题样式 */
        .api-header .main-title {
            font-size: 32px;
            font-weight: 500;
            margin: 0 0 20px 0;
            padding: 0;
            color: #333;
            line-height: 1.2;
        }

        /* 标题样式 */
        .main-title {
            font-size: 24px;
            color: #333;
            margin-bottom: 20px;
            font-weight: normal;
            display: flex;
            align-items: center;
        }

        .status-tag {
            font-size: 12px;
            color: #52c41a;
            background: #f6ffed;
            padding: 2px 8px;
            border-radius: 10px;
            margin-left: 10px;
        }

        /* 方法标签 */
        .method-label {
            display: inline-block;
            padding: 4px 8px;
            background: #fff3e0;
            color: #ff6b35;
            border-radius: 3px;
            font-weight: 500;
            margin-bottom: 15px;
        }

        /* 基本信息 */
        .api-info {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            margin-bottom: 30px;
            color: #666;
            font-size: 13px;
        }

        /* 章节标题 */
        .section-title {
            font-size: 14px;
            color: #333;
            margin: 20px 0;
            font-weight: normal;
        }

        /* 认证信息 */
        .auth-info, .body-params {
            color: #666;
            font-size: 13px;
            margin-bottom: 10px;
        }

        /* 参数表格 */
        .params-table {
            width: 100%;
            border-collapse: collapse;
            margin: 15px 0;
        }

        .params-table th,
        .params-table td {
            padding: 12px;
            text-align: left;
            border-bottom: 1px solid #f0f0f0;
            font-size: 13px;
        }

        .params-table th {
            background: #fafafa;
            color: #333;
            font-weight: normal;
        }

        /* 响应示例 */
        .response-tabs {
            border-bottom: 2px solid #f0f0f0;
            margin: 15px 0;
        }

        .response-tabs .tab {
            display: inline-block;
            padding: 8px 16px;
            color: #666;
            cursor: pointer;
        }

        .response-tabs .tab.active {
            color: #ff6b35;
            position: relative;
        }

        .response-tabs .tab.active:after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 2px;
            background: #ff6b35;
        }

        .response-content {
            background: #f8f9fa;
            border-radius: 4px;
        }

        .code-header {
            padding: 8px 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #eee;
        }

        .copy-btn {
            border: none;
            background: none;
            color: #666;
            cursor: pointer;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .code-block {
            margin: 0;
            padding: 15px;
            font-family: monospace;
            white-space: pre;
            color: #333;
        }

        /* 导航链接 */
        .nav-links {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #f0f0f0;
        }

        .nav-links a {
            color: #666;
            text-decoration: none;
        }

        .nav-links a:hover {
            color: #333;
        }

        /* 更新折叠状态的图标样式 */
        .group-header .fa {
            margin-right: 8px;
            transition: all 0.2s ease;
            width: 16px;  /* 固定宽度以防止图标切换时的抖动 */
            text-align: center;
        }

        /* 分组展开时的图标状态 */
        .api-group.expanded .group-header .fa {
            transform: rotate(90deg);
        }

        .collapse {
            display: none;
        }

        .collapse.in {
            display: block;
        }

        /* API路径区域样式 */
        .api-path-section {
            display: flex;
            align-items: center;
            gap: 12px;
            background: #F8F9FC;
            padding: 12px 16px;
            border-radius: 6px;
        }

        .path-container {
            display: flex;
            align-items: center;
            gap: 12px;
            flex: 1;
        }

        /* 包装器样式 */
        .api-path-wrapper {
            flex: 1;
            display: inline-block;
        }

        /* 路由地址样式 */
        .api-path {
            font-size: 14px;
            color: #333;
            cursor: pointer;
            position: relative;
            display: inline-block;
        }

        /* 虚线下划线 */
        .api-path:hover::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            border-bottom: 1px dashed #333;
        }

        /* 提示框样式 */
        .copy-tooltip {
            position: absolute;
            top: -30px;
            left: 50%;
            transform: translateX(-50%);
            background: rgba(0, 0, 0, 0.75);
            color: white;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            display: none;
            pointer-events: none;
        }

        /* 添加小三角 */
        .copy-tooltip::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 50%;
            transform: translateX(-50%);
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 4px solid rgba(0, 0, 0, 0.75);
        }

        /* 显示提示框 */
        .api-path:hover .copy-tooltip {
            display: block;
        }

        .debug-btn {
            background: #4371FB;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 24px;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: background-color 0.2s;
        }

        .debug-btn:hover {
            background: #3560EA;
        }

        .debug-btn .fa {
            font-size: 12px;
        }

        /* 左侧菜单中的方法标签样式 */
        .api-list .method-tag {
            background: none !important;
            padding: 0;
            min-width: auto;
            margin-right: 8px;
            font-size: 12px;
            font-weight: 500;
        }

        /* POST方法的颜色 */
        .api-list .method-tag.post {
            color: #ef6820 !important;
        }

        /* GET方法保持灰色 */
        .api-list .method-tag.get {
            color: #666 !important;
        }

        /* 选中状态的样式 */
        .api-item.active {
            background: rgba(67, 113, 251, 0.1) !important;  /* 使用淡蓝色背景 */
            border-right: 3px solid rgba(67, 113, 251, 1) !important;  /* 使用蓝色边框 */
        }

        .api-item {
            display: flex;
            align-items: center;
            padding: 8px 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            border-right: 3px solid transparent;
        }

        .api-item:hover {
            background: #f5f5f5;
        }

        .api-title {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* 分组样式 */
        .api-group {
            border-bottom: 1px solid #eee;
        }

        .group-header {
            padding: 10px 15px;
            cursor: pointer;
            display: flex;
            align-items: center;
            background: #fafafa;
        }

        .group-header:hover {
            background: #f0f0f0;
        }

        .group-header .fa {
            margin-right: 8px;
            transition: all 0.2s ease;
            width: 16px;  /* 固定宽度以防止图标切换时的抖动 */
            text-align: center;
        }

        /* 展开状态的图标旋转 */
        .api-group.expanded .group-header .fa {
            transform: rotate(90deg);
        }

        .api-count {
            margin-left: auto;
            background: #e8e8e8;
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 12px;
            color: #666;
        }

        /* 搜索建议样式优化 */
        .search-suggestions {
            position: absolute;
            top: calc(100% + 4px);
            left: 16px;
            right: 16px;
            background: white;
            border-radius: 6px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #eee;
        }

        .suggestion-item {
            padding: 10px 12px;
            cursor: pointer;
            display: flex;
            align-items: center;
            transition: all 0.2s ease;
        }

        .suggestion-item:hover {
            background: #f5f7f9;
        }

        .suggestion-item .method-tag {
            font-size: 12px;
            font-weight: 500;
            min-width: 45px;
        }

        .suggestion-item .method-tag.get {
            color: #666;
        }

        .suggestion-item .title {
            margin-left: 8px;
            color: #454b54;
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .suggestion-item .highlight {
            color: #ef6820;
            font-weight: 500;
            background: rgba(239, 104, 32, 0.1);
            padding: 0 2px;
            border-radius: 2px;
        }

        /* 滚动条美化 */
        .search-suggestions::-webkit-scrollbar {
            width: 6px;
        }

        .search-suggestions::-webkit-scrollbar-thumb {
            background: #ddd;
            border-radius: 3px;
        }

        .search-suggestions::-webkit-scrollbar-track {
            background: #f5f5f5;
        }

        /* 调试按钮样式 */
        .debug-btn {
            background: #4371FB;
            color: white;
            border: none;
            border-radius: 4px;
            padding: 8px 24px;
            font-size: 14px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: background-color 0.2s;
        }

        .debug-btn:hover {
            background: #3560EA;
        }

        .debug-btn .fa {
            font-size: 12px;
        }

        /* 参数输入框样式 */
        .param-input {
            width: 100%;
            padding: 6px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        /* 文件上传按钮样式 */
        .file-upload {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .upload-btn {
            padding: 6px 12px;
            background: #f5f7f9;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .file-name {
            color: #666;
            font-size: 14px;
        }

        /* 响应结果区域样式 */
        .response-section {
            margin-top: 24px;
            background: transparent;  /* 移除背景色 */
        }

        .section-title {
            font-size: 16px;
            color: #1a1a1a;
            margin: 0 0 16px 0;
            padding: 0;  /* 移除内边距 */
            font-weight: 600;
        }

        /* 状态码说明样式 */
        .status-info {
            padding: 12px 0;  /* 只保留上下内边距 */
            border-top: 1px solid #f0f0f0;
        }

        .status-title {
            font-size: 15px;
            color: #1a1a1a;
            margin-bottom: 8px;
        }

        .status-detail {
            display: flex;
            gap: 24px;
            color: #666;
            font-size: 14px;
        }

        /* 数据结构和示例布局 */
        .response-content-wrapper {
            display: flex;
            gap: 24px;  /* 添加间距替代边框分隔 */
            border-top: 1px solid #f0f0f0;
            padding-top: 16px;
        }

        .data-structure {
            flex: 1;
        }

        .response-example {
            flex: 1;
        }

        .structure-title, .example-title {
            font-size: 14px;
            color: #1a1a1a;
            margin-bottom: 12px;
            font-weight: 500;
        }

        /* 数据结构表格样式 */
        .structure-table {
            width: 100%;
            border-collapse: collapse;
        }

        .structure-table th {
            background: #fafafa;
            padding: 8px 12px;
            text-align: left;
            font-size: 13px;
            color: #666;
            border: 1px solid #f0f0f0;
        }

        .structure-table td {
            padding: 8px 12px;
            font-size: 13px;
            border: 1px solid #f0f0f0;
        }

        .structure-table .required {
            color: #ff4d4f;
        }

        /* 示例代码样式 */
        .example-content {
            margin: 0;
            background: #f8f9fc;
            padding: 12px 16px;
            border-radius: 4px;
            font-family: Monaco, Menlo, Consolas, monospace;
            font-size: 13px;
            line-height: 1.5;
            color: #333;
            border: 1px solid #f0f0f0;
        }

        .example-content code {
            white-space: pre-wrap;
        }

        /* 参数部分样式 */
        .params-section {
            margin-top: 24px;
        }

        .section-title {
            font-size: 16px;
            color: #1a1a1a;
            margin: 0 0 16px 0;
            font-weight: 600;
        }

        .auth-info {
            margin-bottom: 12px;
            color: #666;
            font-size: 14px;
        }

        .body-params {
            color: #333;
            font-size: 14px;
            margin-bottom: 12px;
        }

        /* 参数表格样式 */
        .body-params-table {
            width: 100%;
            border-collapse: collapse;
        }

        .body-params-table th {
            background: #fafafa;
            padding: 12px;
            text-align: left;
            font-weight: 500;
            color: #666;
            font-size: 13px;
            border: 1px solid #f0f0f0;
        }

        .body-params-table td {
            padding: 12px;
            border: 1px solid #f0f0f0;
            font-size: 13px;
            vertical-align: top;
        }

        /* 参数名称列 */
        .param-name {
            color: #1a1a1a;
            font-weight: 500;
            width: 15%;
        }

        /* 参数值列 */
        .param-value {
            width: 35%;
        }

        /* 参数类型列 */
        .param-type {
            color: #666;
            width: 15%;
        }

        /* 参数说明列 */
        .param-desc {
            color: #666;
            line-height: 1.5;
            width: 35%;
        }

        /* 参数输入框样式 */
        .param-input {
            width: 100%;
            padding: 7px 12px;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            font-size: 13px;
            color: #333;
            transition: all 0.2s;
            background: #fff;
        }

        .param-input:focus {
            border-color: #40a9ff;
            outline: none;
            box-shadow: 0 0 0 2px rgba(24,144,255,0.1);
        }

        .param-input::placeholder {
            color: #bfbfbf;
        }

        /* 示例值样式 */
        .param-example {
            color: #888;
            font-size: 12px;
            margin-top: 4px;
            padding: 4px 8px;
            background: #fafafa;
            border-radius: 2px;
            display: inline-block;
        }

        /* 文件上传样式 */
        .file-upload {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .upload-btn {
            padding: 6px 12px;
            background: #fafafa;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: #454545;
            transition: all 0.2s;
        }

        .upload-btn:hover {
            background: #f5f5f5;
            border-color: #d9d9d9;
        }

        .upload-btn i {
            font-size: 14px;
        }

        .file-name {
            color: #666;
            font-size: 13px;
        }

        /* 必填标记 */
        .required::after {
            content: ' *';
            color: #ff4d4f;
            margin-left: 2px;
        }

        /* 表格斑马纹 */
        .body-params-table tr:nth-child(even) {
            background-color: #fafafa;
        }

        /* 表格hover效果 */
        .body-params-table tr:hover {
            background-color: #f5f5f5;
        }

        /* 状态信息样式 */
        .status-info {
            padding: 12px 0;
            border-top: 1px solid #f0f0f0;
        }

        .status-success .status-title {
            color: #52c41a;
        }

        .status-error .status-title {
            color: #ff4d4f;
        }

        .status-title {
            font-size: 15px;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .status-detail {
            display: flex;
            gap: 24px;
            color: #666;
            font-size: 14px;
        }

        /* 当状态信息在一行显示不下时自动换行 */
        @media screen and (max-width: 768px) {
            .status-detail {
                flex-wrap: wrap;
                gap: 12px;
            }
        }

        /* 设置按钮样式 */
        .settings-btn {
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            padding: 6px 12px;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: all 0.3s ease;
            height: 32px;
            white-space: nowrap;
            margin-bottom: 24px;
            margin-left: auto;          /* 使用 margin-left: auto 将按钮推到右边 */
        }

        .settings-btn:hover {
            background: #f5f5f5;
            border-color: #ccc;
        }

        .settings-btn i {
            font-size: 14px;
        }

        .settings-btn span {
            line-height: 1;
            font-size: 14px;
        }

        /* 标题和按钮的容器 */
        .title-container {
            display: flex;
            align-items: center;
            justify-content: space-between; /* 在容器内使用 space-between */
            width: 100%;                    /* 确保容器占满整行 */
        }

        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }

        .modal-header {
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between; /* 使用两端对齐 */
            align-items: center;
            position: relative;         /* 为绝对定位的关闭按钮提供参考 */
        }

        .modal-header h2 {
            margin: 0;
            font-size: 18px;
            color: #333;
            flex: 1;                   /* 标题占据剩余空间 */
        }

        /* 关闭按钮样式 */
        .close {
            position: absolute;        /* 使用绝对定位 */
            right: 20px;              /* 距离右边 20px */
            top: 50%;                 /* 垂直居中 */
            transform: translateY(-50%);
            font-size: 24px;
            font-weight: bold;
            color: #666;
            cursor: pointer;
            line-height: 1;
            padding: 0;
            background: none;
            border: none;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .close:hover {
            color: #333;
        }

        /* 确保弹窗内容正确定位 */
        .modal-content {
            position: relative;
            background-color: #fff;
            margin: 10% auto;
            padding: 0;
            width: 400px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        /* 调整弹窗主体内容的内边距 */
        .modal-body {
            padding: 20px;
            max-height: calc(80vh - 120px); /* 限制最大高度 */
            overflow-y: auto;              /* 内容过多时可滚动 */
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
            color: #666;
        }

        .form-control {
            width: 100%;
            padding: 8px 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 14px;
        }

        .form-control:focus {
            border-color: #4a9eff;
            outline: none;
            box-shadow: 0 0 0 2px rgba(74, 158, 255, 0.2);
        }

        .modal-footer {
            padding: 15px 20px;
            border-top: 1px solid #eee;
            text-align: right;
        }

        .modal-footer button {
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            margin-left: 10px;
        }

        .save-btn {
            background: #4a9eff;
            color: white;
            border: none;
        }

        .save-btn:hover {
            background: #3d8be0;
        }

        .cancel-btn {
            background: #fff;
            color: #666;
            border: 1px solid #ddd;
        }

        .cancel-btn:hover {
            background: #f5f5f5;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div id="sidebar">
            <div class="search-container">
                <div class="search-box">
                    <i class="fa fa-search"></i>
                    <input type="text" id="apiSearch" placeholder="搜索接口..." autocomplete="off">
                </div>
                <div class="search-suggestions" style="display: none;"></div>
            </div>
            
            <?php foreach ($docsList as $groupName => $group): ?>
            <div class="api-group" data-group="<?php echo $groupName; ?>">
                <div class="group-header">
                    <i class="fa fa-file"></i>
                    <span class="group-name"><?php echo $group['title']; ?></span>
                    <span class="api-count"><?php echo count($group['apis']); ?></span>
                </div>
                <div class="api-list" style="display: none;">
                    <?php foreach ($group['apis'] as $index => $api): ?>
                    <div class="api-item" 
                         data-group="<?php echo $groupName; ?>"
                         data-index="<?php echo $index; ?>">
                        <div class="method-tag <?php echo strtolower($api['method']); ?>"><?php echo $api['method']; ?></div>
                        <span class="api-title"><?php echo $api['title']; ?></span>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <?php endforeach; ?>
        </div>

        <div id="main-content">
            <div class="api-content">
                <!-- 内容将通过JavaScript动态加载 -->
            </div>
        </div>
    </div>

    <!-- 添加折叠按钮 -->
    <div class="sidebar-toggle">
        <i class="fa fa-angle-left"></i>
    </div>

    <script>
    // 确保 jQuery 已加载
    function initializeWhenReady() {
        if (typeof jQuery === 'undefined') {
            console.error('jQuery is not loaded! Retrying in 100ms...');
            setTimeout(initializeWhenReady, 100);
            return;
        }

        // jQuery 已加载，初始化应用
        $(document).ready(function() {
            let isToggling = false;
            
            const toggleGroup = (groupElement) => {
                if (isToggling) return;
                
                isToggling = true;
                const $group = $(groupElement);
                const $apiList = $group.find('.api-list');
                const $folderIcon = $group.find('.fa');  // 改为选择所有 fa 类
                const isExpanded = $group.hasClass('expanded');
                
                setTimeout(() => {
                    if (!isExpanded) {
                        // 展开 - 使用文件夹图标
                        $group.addClass('expanded');
                        $folderIcon.removeClass('fa-folder').addClass('fa-folder-open');
                        $apiList.slideDown(200, () => {
                            isToggling = false;
                        });
                    } else {
                        // 关闭 - 使用文件图标
                        $group.removeClass('expanded');
                        $folderIcon.removeClass('fa-folder-open').addClass('fa-file');
                        $apiList.slideUp(200, () => {
                            isToggling = false;
                        });
                    }
                }, 50);
            };

            $('.group-header').off('click').on('click', function(e) {
                e.preventDefault();
                e.stopPropagation();
                const group = $(this).closest('.api-group');
                toggleGroup(group);
                return false;
            });

            // 初始化时保存API数据到全局变量
            var apiDataList = <?php echo json_encode($docsList, JSON_UNESCAPED_UNICODE); ?>;

            // 从URL hash或localStorage恢复上次选中的接口
            const restoreSelectedApi = () => {
                const hash = window.location.hash.slice(1);
                const savedGroup = localStorage.getItem('selectedApiGroup');
                const savedIndex = localStorage.getItem('selectedApiIndex');
                
                // 默认折叠所有分组
                $('.api-list').hide();
                $('.api-group').removeClass('expanded');
                
                if (hash) {
                    const [group, index] = hash.split('-');
                    selectApi(group, parseInt(index));
                    // 展开包含选中接口的分组
                    $(`.api-group[data-group="${group}"]`).addClass('expanded').find('.api-list').show();
                } else if (savedGroup && savedIndex) {
                    selectApi(savedGroup, parseInt(savedIndex));
                    // 展开包含选中接口的分组
                    $(`.api-group[data-group="${savedGroup}"]`).addClass('expanded').find('.api-list').show();
                } else {
                    // 如果都没有，选择并展开第一个分组
                    const firstGroup = Object.keys(apiDataList)[0];
                    if (firstGroup) {
                        selectApi(firstGroup, 0);
                        $(`.api-group[data-group="${firstGroup}"]`).addClass('expanded').find('.api-list').show();
                    }
                }
            };

            // 选择指定的API
            const selectApi = (group, index) => {
                $('.api-item').removeClass('active');
                $(`.api-item[data-group="${group}"][data-index="${index}"]`).addClass('active');
                
                const apiData = apiDataList[group].apis[index];
                if (apiData) {
                    renderApiContent(apiData);
                    window.location.hash = `${group}-${index}`;
                    localStorage.setItem('selectedApiGroup', group);
                    localStorage.setItem('selectedApiIndex', index);
                }
            };

            // 监听hash变化
            $(window).on('hashchange', function() {
                restoreSelectedApi();
            });

            // 初始化时恢复选中状态
            restoreSelectedApi();

            // 从 localStorage 加载配置
            if (localStorage) {
                $('#token').val(localStorage.getItem('token') || '');
                $('#sign_key').val(localStorage.getItem('sign_key') || '');
            }

        

        
            // 所有菜单默认折叠状态
            $('.api-list').addClass('collapse');

            // 折叠菜单功能
            $('.sidebar-toggle').click(function() {
                $('#sidebar').toggleClass('collapsed');
                $(this).toggleClass('collapsed');
                
                // 保存折叠状态到localStorage
                localStorage.setItem('sidebarCollapsed', $('#sidebar').hasClass('collapsed'));
            });

            // 恢复上次的折叠状态
            if (localStorage.getItem('sidebarCollapsed') === 'true') {
                $('#sidebar').addClass('collapsed');
                $('.sidebar-toggle').addClass('collapsed');
            }

            // 添加格式化参数的函数
            function formatParams(params) {
                if (!params || !Array.isArray(params) || params.length === 0) {
                    return `<tr><td colspan="4" class="text-center">暂无参数</td></tr>`;
                }
                
                return params.map(param => `
                    <tr>
                        <td>${param.name || '-'}</td>
                        <td>${param.required == 1 ? '是' : '否'}</td>
                        <td>${param.type || 'string'}</td>
                        <td>${param.desc || '-'}</td>
                    </tr>
                `).join('');
            }

            function renderApiContent(apiData) {
                console.group('Rendering API Content');
                // console.log('完整数据:', apiData);
                
                var content = `
                    <div class="api-header">
                        <div class="title-container">
                            <h1 class="main-title">${apiData.title || '未命名接口'}</h1>
                            <button class="settings-btn" onclick="showSettings()">
                                <i class="fa fa-cog"></i>
                                <span>设置</span>
                            </button>
                        </div>
                    </div>

                    <div class="api-path-section">
                        <div class="path-container">
                            <span class="method-tag ${apiData.method.toLowerCase()}">${apiData.method}</span>
                            <div class="api-path-wrapper">
                                <span class="api-path">
                                    ${apiData.route}
                                    <div class="copy-tooltip">点击复制</div>
                                </span>
                            </div>
                        </div>
                        <button class="debug-btn">
                            <i class="fa fa-play"></i>
                            调试
                        </button>
                    </div>

                    <div class="api-info">
                        ${apiData.author ? `<div class="info-item">创建人：${apiData.author}</div>` : ''}
                        ${apiData.updater ? `<div class="info-item">更新人：${apiData.updater}</div>` : ''}
                        ${apiData.create_time ? `<div class="info-item">创建时间：${apiData.create_time}</div>` : ''}
                        ${apiData.update_time ? `<div class="info-item">更新时间：${apiData.update_time}</div>` : ''}
                    </div>

                    <div class="params-section">
                        <h2 class="section-title">请求参数</h2>
                        ${apiData.auth ? `<div class="auth-info">认证方式：${apiData.auth}</div>` : ''}
                        <div class="body-params">Body请求参数 (${apiData.contentType || 'form-data'})</div>
                        
                        <table class="body-params-table">
                            <thead>
                                <tr>
                                    <th width="15%">参数名</th>
                                    <th width="35%">参数值</th>
                                    <th width="15%">类型</th>
                                    <th>说明</th>
                                </tr>
                            </thead>
                            <tbody>
                                ${apiData.params.map(param => `
                                    <tr>
                                        <td class="param-name">${param.name}</td>
                                        <td class="param-value">
                                            ${param.type === 'file' ? `
                                                <div class="file-upload">
                                                    <input type="file" id="file_${param.name}" style="display: none;">
                                                    <button class="upload-btn" onclick="document.getElementById('file_${param.name}').click()">
                                                        <i class="fa fa-upload"></i> 选择文件
                                                    </button>
                                                    <span class="file-name"></span>
                                                </div>
                                            ` : `
                                                <input type="text" 
                                                       class="param-input" 
                                                       name="${param.name}" 
                                                       placeholder="请输入${param.name}"
                                                       value="${param.example || ''}"
                                                >
                                            `}
                                        </td>
                                        <td class="param-type">${param.type}</td>
                                        <td class="param-desc">
                                            ${param.desc}
                                            ${param.example ? `<div class="param-example">示例值：${param.example}</div>` : ''}
                                        </td>
                                    </tr>
                                `).join('')}
                            </tbody>
                        </table>
                    </div>

                    <div class="response-section">
                        <h3 class="section-title">返回响应</h3>
                        
                        <!-- 状态码说明 -->
                        <div class="status-info">
                            <div class="status-title">成功(200)</div>
                            <div class="status-detail">
                                <span>HTTP 状态码: 1</span>
                                <span>内容格式: JSON</span>
                                <span>application/json</span>
                            </div>
                        </div>

                        <!-- 数据结构和示例并排显示 -->
                        <div class="response-content-wrapper">
                            <!-- 数据结构 -->
                            <div class="data-structure">
                                <div class="structure-title">数据结构</div>
                                <table class="structure-table">
                                    <tr>
                                        <th>名称</th>
                                        <th>类型</th>
                                        <th>说明</th>
                                        <th>必选</th>
                                    </tr>
                                    <tr>
                                        <td>code</td>
                                        <td>integer</td>
                                        <td>状态码</td>
                                        <td class="required">必需</td>
                                    </tr>
                                    <tr>
                                        <td>msg</td>
                                        <td>string</td>
                                        <td>提示语</td>
                                        <td class="required">必需</td>
                                    </tr>
                                    <!-- 其他字段... -->
                                </table>
                            </div>

                            <!-- 示例 -->
                            <div class="response-example">
                                <div class="example-title">示例</div>
                                <pre class="example-content">
                                    <code>{
    "code": 1,
    "msg": "success",
    "encrypt": 1,
    "time": "1710424951",
    "sign": "f2f7a0fa878f45ca7baebfc9d628f63c",
    "used_time": 0.315419197,
    "reqs": "3.17",
    "data": []
}</code>
                                </pre>
                            </div>
                        </div>
                    </div>
                `;

                $('#main-content .api-content').html(content);
            }

            // 更新复制功能函数
            function copyToClipboard(text) {
                // 创建临时输入框
                const input = document.createElement('input');
                input.style.position = 'fixed';
                input.style.opacity = 0;
                input.value = text;
                document.body.appendChild(input);
                
                // 选择并复制
                input.select();
                document.execCommand('copy');
                
                // 移除临时输入框
                document.body.removeChild(input);
                
                // 显示提示
                const hint = $('<div>')
                    .text('已复制')
                    .css({
                        position: 'fixed',
                        top: '20px',
                        left: '50%',
                        transform: 'translateX(-50%)',
                        background: 'rgba(0, 0, 0, 0.7)',
                        color: 'white',
                        padding: '8px 16px',
                        borderRadius: '4px',
                        zIndex: 9999
                    })
                    .appendTo('body');
                
                // 2秒后移除提示
                setTimeout(() => hint.remove(), 2000);
            }

            // 绑定API项点击事件
            $('.api-item').click(function() {
                const group = $(this).data('group');
                const index = $(this).data('index');
                selectApi(group, index);
            });

            const $searchInput = $('#apiSearch');
            const $suggestions = $('.search-suggestions');
            
            // 搜索和建议功能
            function searchApis(keyword) {
                keyword = keyword.toLowerCase();
                let results = [];
                
                // 遍历所有API数据
                Object.entries(apiDataList).forEach(([groupName, group]) => {
                    group.apis.forEach((api, index) => {
                        if (api.title.toLowerCase().includes(keyword)) {
                            results.push({
                                group: groupName,
                                index: index,
                                title: api.title,
                                method: api.method
                            });
                        }
                    });
                });
                
                return results;
            }
            
            // 显示搜索建议
            function showSuggestions(results, keyword) {
                if (!results.length) {
                    $suggestions.hide();
                    return;
                }
                
                let html = results.map(api => {
                    // 高亮匹配的文本
                    let title = api.title.replace(
                        new RegExp(keyword, 'gi'),
                        match => `<span class="highlight">${match}</span>`
                    );
                    
                    return `
                        <div class="suggestion-item" data-group="${api.group}" data-index="${api.index}">
                            <span class="method-tag ${api.method.toLowerCase()}">${api.method}</span>
                            <span class="title">${title}</span>
                        </div>
                    `;
                }).join('');
                
                $suggestions.html(html).show();
            }
            
            // 输入事件处理（带防抖）
            let searchTimeout;
            $searchInput.on('input', function() {
                const keyword = $(this).val().trim();
                
                clearTimeout(searchTimeout);
                
                if (keyword.length === 0) {
                    $suggestions.hide();
                    return;
                }
                
                searchTimeout = setTimeout(() => {
                    const results = searchApis(keyword);
                    showSuggestions(results, keyword);
                }, 200);
            });
            
            // 点击建议项
            $(document).on('click', '.suggestion-item', function() {
                const group = $(this).data('group');
                const index = $(this).data('index');
                
                // 展开对应的分组
                const $group = $(`.api-group[data-group="${group}"]`);
                if (!$group.hasClass('expanded')) {
                    toggleGroup($group[0]);
                }
                
                // 选中对应的API
                selectApi(group, index);
                
                // 清空搜索
                $searchInput.val('');
                $suggestions.hide();
            });
            
            // 点击其他地方关闭建议
            $(document).on('click', function(e) {
                if (!$(e.target).closest('.search-container').length) {
                    $suggestions.hide();
                }
            });

            // 绑定点击事件
            $(document).on('click', '.api-path', function() {
                // 获取纯路由地址文本，移除可能的子元素文本（如提示文本）
                const routePath = $(this).clone()    // 克隆元素
                    .children()                       // 找到所有子元素
                    .remove()                         // 移除它们
                    .end()                           // 回到原始元素
                    .text()                          // 获取文本
                    .trim();                         // 移除空格
                
                // 创建临时输入框
                const input = document.createElement('input');
                input.style.position = 'fixed';
                input.style.opacity = 0;
                input.value = routePath;
                document.body.appendChild(input);
                
                // 选择并复制
                input.select();
                document.execCommand('copy');
                
                // 移除临时输入框
                document.body.removeChild(input);
                
                // 显示复制成功提示
                const toast = $('<div>')
                    .text('已复制')
                    .css({
                        position: 'fixed',
                        top: '20px',
                        left: '50%',
                        transform: 'translateX(-50%)',
                        background: 'rgba(0, 0, 0, 0.75)',
                        color: 'white',
                        padding: '8px 16px',
                        borderRadius: '4px',
                        fontSize: '14px',
                        zIndex: 9999
                    })
                    .appendTo('body');
                
                // 2秒后移除提示
                setTimeout(() => toast.remove(), 2000);
            });

            // 显示API内容时初始化参数默认值
            function showApiContent(group, index) {
                const api = apiDataList[group].apis[index];
                
                // 渲染API内容
                const content = renderApiContent(api);
                $('.api-content').html(content);
                
                // 初始化参数默认值
                $('.body-params-table .param-input').each(function() {
                    const $input = $(this);
                    const paramName = $input.attr('name');
                    const defaultValue = getDefaultValue(paramName, api.params);
                    if (defaultValue) {
                        $input.val(defaultValue);
                    }
                });
            }
            
            // 获取默认值的辅助函数
            function getDefaultValue(paramName, params) {
                const param = params.find(p => p.name === paramName);
                return param?.default || '';
            }
            
            // 收集表单数据
            function collectFormData() {
                const formData = new FormData();
                
                // 收集 Body 参数
                $('.body-params-table .param-input').each(function() {
                    const value = $(this).val() || '';
                    formData.append($(this).attr('name'), value);
                });
                
                // 收集文件
                $('.body-params-table input[type="file"]').each(function() {
                    if (this.files[0]) {
                        formData.append($(this).attr('id').replace('file_', ''), this.files[0]);
                    }
                });
                
                return formData;
            }
            
            // 点击调试按钮发送请求
            $(document).on('click', '.debug-btn', function() {
                // 获取纯净的请求方法和URL
                const method = $('.method-tag')
                    .first()           // 只获取第一个方法标签
                    .text()           // 获取文本内容
                    .trim()           // 移除空格
                    .toLowerCase();   // 转换为小写
                
                const url = $('.api-path')
                    .first()          // 只获取第一个路径
                    .clone()          // 克隆元素
                    .children()       // 获取所有子元素
                    .remove()         // 移除子元素
                    .end()            // 回到原始元素
                    .text()           // 获取文本内容
                    .trim();          // 移除空格
                
                // console.log('Request Method:', method); // 调试输出
                // console.log('Request URL:', url);      // 调试输出
                
                const $btn = $(this);
                
                // 显示加载状态
                $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> 请求中...');
                
                // 根据不同的请求方法处理数据
                let ajaxOptions = {
                    url: url,
                    type: method,     // 使用 type 替代 method
                    beforeSend: function(xhr) {
                        // 构建 headers
                        var headers = {};
                        
                        // 添加 token
                        var token = localStorage.getItem('token') || '';
                        if (token.length > 0) {
                            headers['token'] = token;
                        }
                        
                        // 添加基础 headers
                        headers["client"] = "pc";
                        headers["time"] = Math.floor(Date.now() / 1000);
                        headers["device"] = "edge";
                        headers["version"] = "v1.0.0";
                        headers["custom"] = Math.random().toString(36).substr(2);
                        
                        // 获取 sign_key
                        var signKey = localStorage.getItem('sign_key') || '';
                        
                        // 构建签名字符串
                        var str = headers["client"] + 
                                 signKey + 
                                 url.toLowerCase() + 
                                 headers["time"] + 
                                 headers["device"] + 
                                 headers["version"] + 
                                 token + 
                                 headers["custom"];
                        
                        // 计算签名
                        headers['sign'] = hex_md5(str);
                        
                        // 设置所有 headers
                        Object.keys(headers).forEach(key => {
                            xhr.setRequestHeader(key, headers[key]);
                        });
                        
                        // 调试输出
                        // console.log('Request Headers:', headers);
                        // console.log('Sign String:', str);
                    },
                    success: function(response, status, xhr) {
                        showResponse({
                            status: xhr.status,
                            time: `${xhr.responseTime}ms`,
                            data: response
                        });
                    },
                    error: function(xhr) {
                        showResponse({
                            status: xhr.status,
                            time: `${xhr.responseTime}ms`,
                            data: xhr.responseText
                        });
                    },
                    complete: function() {
                        $btn.prop('disabled', false).html('<i class="fa fa-play"></i> 调试');
                    }
                };

                // 根据请求方法处理数据
                switch(method) {
                    case 'get':
                        const params = new URLSearchParams();
                        $('.param-input').each(function() {
                            const value = $(this).val();
                            if (value) {
                                params.append($(this).attr('name'), value);
                            }
                        });
                        ajaxOptions.url = `${url}${params.toString() ? '?' + params.toString() : ''}`;
                        break;
                        
                    case 'post':
                        const contentType = $('input[name="Content-Type"]').val() || 'application/x-www-form-urlencoded';
                        
                        if (contentType.includes('multipart/form-data')) {
                            const formData = new FormData();
                            $('.param-input').each(function() {
                                const value = $(this).val();
                                if (value) {
                                    formData.append($(this).attr('name'), value);
                                }
                            });
                            $('input[type="file"]').each(function() {
                                if (this.files[0]) {
                                    formData.append($(this).attr('name'), this.files[0]);
                                }
                            });
                            ajaxOptions.data = formData;
                            ajaxOptions.processData = false;
                            ajaxOptions.contentType = false;
                        } else if (contentType.includes('application/json')) {
                            const jsonData = {};
                            $('.param-input').each(function() {
                                const value = $(this).val();
                                if (value) {
                                    jsonData[$(this).attr('name')] = value;
                                }
                            });
                            ajaxOptions.data = JSON.stringify(jsonData);
                            ajaxOptions.contentType = 'application/json';
                        } else {
                            const formData = {};
                            $('.param-input').each(function() {
                                const value = $(this).val();
                                if (value) {
                                    formData[$(this).attr('name')] = value;
                                }
                            });
                            ajaxOptions.data = formData;
                        }
                        break;
                        
                    case 'put':
                    case 'patch':
                        // PUT和PATCH请求通常使用JSON
                        const putData = {};
                        $('.param-input').each(function() {
                            const value = $(this).val();
                            if (value) {
                                putData[$(this).attr('name')] = value;
                            }
                        });
                        ajaxOptions.data = JSON.stringify(putData);
                        ajaxOptions.contentType = 'application/json';
                        break;
                        
                    case 'delete':
                        // DELETE请求通常不需要请求体
                        // 如果需要参数，添加到URL查询字符串
                        const deleteParams = new URLSearchParams();
                        $('.param-input').each(function() {
                            const value = $(this).val();
                            if (value) {
                                deleteParams.append($(this).attr('name'), value);
                            }
                        });
                        ajaxOptions.url = `${url}${deleteParams.toString() ? '?' + deleteParams.toString() : ''}`;
                        break;
                }
                // 发送请求
                $.ajax(ajaxOptions);
            });
            
            // 文件上传处理
            $(document).on('change', 'input[type="file"]', function() {
                const fileName = this.files[0]?.name || '未选择文件';
                $(this).siblings('.file-name').text(fileName);
            });
        });
    }

    // 启动初始化
    initializeWhenReady();
    </script>

    <!-- 显示响应结果 -->
    <script>
    // 显示响应结果
    function showResponse(response) {
        // 获取现有的响应区域
        const $responseSection = $('.response-section');
         // console.log('responseData',response);
        try {
            // 解析响应数据
            let responseData = response.data;

            if (typeof response.data === 'string') {
                responseData = JSON.parse(response.data);
            }
            
            // 调试输出原始响应数据
            // console.log('Original Response Data:', responseData);
            
            // 处理加密数据
            if (responseData.encrypt === 1 && responseData.data) {
                try {
                    // 生成解密所需的 iv 和 key
                    const iv = CryptoJS.enc.Utf8.parse(hex_md5("ga_key_" + responseData.time).substring(0, 16));
                    const key = CryptoJS.enc.Utf8.parse(hex_md5(responseData.sign).substring(0, 16));
                    //
                    // console.log('Decryption Parameters:', {
                    //     time: responseData.time,
                    //     sign: responseData.sign,
                    //     iv: iv.toString(),
                    //     key: key.toString()
                    // });
                    
                    // 解密数据
                    let decryptedString = CryptoJS.AES.decrypt(
                        responseData.data, 
                        key, 
                        {
                            iv: iv, 
                            padding: CryptoJS.pad.Pkcs7
                        }
                    ).toString(CryptoJS.enc.Utf8);

                    // console.log('Raw Decrypted String:', decryptedString);

                    // 尝试解析 JSON
                    try {
                        responseData.data = JSON.parse(decryptedString);
                    } catch (e) {
                        console.error('JSON Parse Error:', e);
                        // console.log('Decrypted String:', decryptedString);
                        responseData.data = '数据解析失败';
                    }
                } catch (decryptError) {
                    console.error('Data decryption error:', decryptError);
                    // console.log('Encrypted Data:', responseData.data);
                    responseData.data = '数据解密失败';
                }
            }
            
            // 调试输出最终处理后的数据
            // console.log('Final Response Data:', responseData);
            
            // 根据code判断状态
            const isSuccess = responseData.code === 1;
            const statusTitle = isSuccess ? '成功(1)' : `失败(${responseData.code})`;
            const statusClass = isSuccess ? 'status-success' : 'status-error';
            
            // 更新状态信息
            const statusHtml = `
                <div class="status-info ${statusClass}">
                    <div class="status-title">${statusTitle}</div>
                    <div class="status-detail">
                        <span>HTTP 状态码: ${response.status}</span>
                        <span>内容格式: JSON</span>
                        <span>application/json</span>
                        <span>响应时间: ${responseData.used_time}s</span>
                        <span>请求数/秒: ${responseData.reqs}</span>
                        ${responseData.encrypt ? '<span>数据已加密</span>' : ''}
                    </div>
                </div>
            `;
            $responseSection.find('.status-info').replaceWith(statusHtml);

            // 动态生成数据结构表格
            const structureHtml = `
                <div class="data-structure">
                    <div class="structure-title">数据结构</div>
                    <table class="structure-table">
                        <tr>
                            <th>名称</th>
                            <th>类型</th>
                            <th>说明</th>
                            <th>必选</th>
                        </tr>
                        ${generateStructureRows(responseData)}
                    </table>
                </div>
            `;
            $responseSection.find('.data-structure').replaceWith(structureHtml);

            // 更新示例内容
            const jsonString = JSON.stringify(responseData, null, 4);
            $responseSection.find('.response-example').html(`
                <div class="example-title">示例</div>
                <pre class="example-content"><code>${escapeHtml(jsonString)}</code></pre>
            `);
            
        } catch (e) {
            console.error('Response parsing error:', e);
            // 处理错误情况
            const statusHtml = `
                <div class="status-info status-error">
                    <div class="status-title">失败</div>
                    <div class="status-detail">
                        <span>HTTP 状态码: ${response.status}</span>
                        <span>错误信息: ${e.message}</span>
                        <span>响应时间: ${response.time || '0'}ms</span>
                    </div>
                </div>
            `;
            $responseSection.find('.status-info').replaceWith(statusHtml);
        }
    }

    // 递归生成数据结构行
    function generateStructureRows(data, prefix = '') {
        let rows = '';
        
        Object.entries(data).forEach(([key, value]) => {
            const fullKey = prefix ? `${prefix}.${key}` : key;
            const type = getValueType(value);
            const description = getFieldDescription(key);
            const required = isRequiredField(key);
            
            rows += `
                <tr>
                    <td class="param-name">${fullKey}</td>
                    <td class="param-type">${type}</td>
                    <td class="param-desc">${description}</td>
                    <td class="${required ? 'required' : ''}">${required ? '必需' : '可选'}</td>
                </tr>
            `;

            // 处理嵌套对象或数组
            if (type === 'object' && value !== null) {
                rows += generateStructureRows(value, fullKey);
            } else if (type === 'array' && value.length > 0) {
                // 如果数组不为空，显示第一个元素的结构
                if (typeof value[0] === 'object') {
                    rows += generateStructureRows(value[0], `${fullKey}[0]`);
                }
            }
        });
        
        return rows;
    }

    // 获取值的类型
    function getValueType(value) {
        if (Array.isArray(value)) {
            return 'array';
        }
        if (value === null) {
            return 'null';
        }
        return typeof value;
    }

    // 获取字段说明
    function getFieldDescription(key) {
        const descriptions = {
            code: '状态码',
            msg: '提示信息',
            data: '返回数据',
            encrypt: '加密标识',
            time: '时间戳',
            sign: '签名',
            used_time: '执行时间',
            reqs: '请求数',
            // 可以根据需要添加更多字段说明
        };
        return descriptions[key] || '-';
    }

    // 判断字段是否必选
    function isRequiredField(key) {
        const requiredFields = ['code', 'msg', 'data'];
        return requiredFields.includes(key);
    }

    // HTML转义函数
    function escapeHtml(text) {
        return text
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }
    </script>

    <!-- 显示设置弹窗 -->
    <div id="settingsModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <h2>API 设置</h2>
                <button class="close" onclick="closeModal()">&times;</button>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <label for="token">Token:</label>
                    <input type="text" id="token" class="form-control" placeholder="请输入 Token">
                </div>
                <div class="form-group">
                    <label for="sign_key">Sign Key:</label>
                    <input type="text" id="sign_key" class="form-control" placeholder="请输入 Sign Key">
                </div>
            </div>
            <div class="modal-footer">
                <button class="save-btn" onclick="saveSettings()">保存</button>
                <button class="cancel-btn" onclick="closeModal()">取消</button>
            </div>
        </div>
    </div>

    <script>
    // 显示设置弹窗
    function showSettings() {
        const modal = document.getElementById('settingsModal');
        modal.style.display = 'block';
        
        // 从 localStorage 加载已保存的值
        const token = localStorage.getItem('token') || '';
        const signKey = localStorage.getItem('sign_key') || '';
        
        document.getElementById('token').value = token;
        document.getElementById('sign_key').value = signKey;
    }

    // 关闭弹窗
    function closeModal() {
        const modal = document.getElementById('settingsModal');
        modal.style.display = 'none';
    }

    // 保存设置
    function saveSettings() {
        const token = document.getElementById('token').value;
        const signKey = document.getElementById('sign_key').value;
        
        // 保存到 localStorage
        localStorage.setItem('token', token);
        localStorage.setItem('sign_key', signKey);
        
        // 显示保存成功提示
        const toast = $('<div>')
            .text('设置已保存')
            .css({
                position: 'fixed',
                top: '20px',
                left: '50%',
                transform: 'translateX(-50%)',
                background: 'rgba(0, 0, 0, 0.7)',
                color: 'white',
                padding: '8px 16px',
                borderRadius: '4px',
                zIndex: 9999
            })
            .appendTo('body');
        
        // 2秒后移除提示
        setTimeout(() => toast.remove(), 2000);
        
        // 关闭弹窗
        closeModal();
    }

    // 点击弹窗外部关闭弹窗
    window.onclick = function(event) {
        const modal = document.getElementById('settingsModal');
        if (event.target == modal) {
            closeModal();
        }
    }

    // 点击关闭按钮关闭弹窗
    document.querySelector('.close').onclick = closeModal;
    </script>
</body>
</html>
